<template>
	<div>
		<div class="topTitle">每日练习</div>
		<el-form :model="query" inline label-width="80px">
			<el-form-item label="选择日期">
				<el-date-picker type="date" placeholder="请选择" v-model="query.day" value-format="yyyyMMdd"
					class="margin-right20"></el-date-picker>
			</el-form-item>
			<el-button type="primary" icon="el-icon-search" class="margin-left10" @click="handleSearch">搜索</el-button>
			<el-button type="default" icon="el-icon-refresh-right" @click="handleRefresh">重置</el-button>
		</el-form>
		<div class="margin-top20 margin-bottom20 row-me">
			<el-button type="primary" @click="clickBatchExport">批量导出</el-button>
			<div class="flex1"></div>
			<el-button type="text" @click="visible=true">参数设置</el-button>
		</div>
		<el-table :data="tableData" ref="multipleTable" border header-cell-class-name="table-header-style"
			@selection-change="handleSelectionChange">
			<el-table-column type="expand" width="0">
				<template slot-scope="scope">
					<div style="max-width:50vw;">
						<div class="row-me">
							<span class="color929397 margin-right10">题目</span>
							<div class="flex1 color252525">
								<div>{{scope.row.title}}</div>
								<div class="margin-top10" v-for="(item,index) in scope.row.optionList" :key="index">
									{{item.title}}.{{item.content}}
								</div>
							</div>
						</div>
						<div class="row-me margin-top10">
							<span class="color929397 margin-right10">答案</span>
							<div class="color252525 flex1 line-height21 row-me"><span
									class="colorEE010B font-weight600">{{scope.row.answer}}</span>
								<div class="row-me">
									<span class="margin-right10 margin-left10">[解析]</span>
									<div v-html="scope.row.textExplain"></div>
								</div>
							</div>
						</div>
						<div class="row-me row-center margin-top10">
							<span class="color929397 margin-right10">来源</span>
							<div class="row-me flex-wrap flex1">
								<el-tag class="margin-right10" v-for="(item,index) in scope.row.examSource"
									:key="index">{{item}}</el-tag>
							</div>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column type="selection" width="55" align="center"></el-table-column>
			<el-table-column type="index" width="55" align="center" label="序号"></el-table-column>
			<el-table-column prop="id" label="题目ID" align="center" width="100"></el-table-column>
			<el-table-column label="题目" :show-overflow-tooltip="true" width="500">
				<template slot-scope="{row}">
					<div class="line1">{{row.title}}</div>
				</template>
			</el-table-column>
			<el-table-column prop="type.name" width="100" label="题型" align="center"></el-table-column>
			<el-table-column width="300" label="分类" align="center">
				<template slot-scope="{row}">
					<span class="line1">{{ row.category3 }}/{{ row.category2 }}/{{row.category1 }}</span>
				</template>
			</el-table-column>
			<el-table-column width="100" label="属性" align="center">
				<template slot-scope="{row}">
					<span v-if="row.properType==1">普通题</span>
					<span v-else-if="row.properType==2">作废题</span>
					<span v-else-if="row.properType==3">争议题</span>
					<span v-else-if="row.properType==4">重复题</span>
				</template>
			</el-table-column>
			<el-table-column prop="tag" label="标签分类" align="center"></el-table-column>
		</el-table>

		<!-- 参数设置 -->
		<el-dialog title="参数设置" :visible.sync="visible" width="40%">
			<el-form label-width="120px">
				<el-form-item label="设置题型数量:">
					<div class="row-me row-center margin-bottom10" v-for="(item,index) in randomData" :key="index">
						<el-select filterable v-model="item.questionType" placeholder="选择题型" clearable class="width200">
							<el-option v-for="sort in typeList" :key="sort.id" :label="sort.name" :value="sort.id">
							</el-option>
						</el-select>
						<i class="el-icon-arrow-right font-size26 font-bold"></i>
						<el-input v-model="item.count" class="width200" placeholder="请输入题型数量" @input="sum" type="number"></el-input>
						<div class="row-me row-center margin-left10" v-if="randomData.length-1==index">
							<i class="el-icon-circle-plus margin-right10 font-size18 pointer" @click="randomData.push({})"></i>
							<i class="el-icon-remove font-size18 pointer" @click="[randomData.pop(),sum()]" v-if="index!=0"></i>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="题目总数:">
					<div>{{count}}</div>
				</el-form-item>
			</el-form>
			<span slot="footer">
				<el-button @click="visible = false">取 消</el-button>
				<el-button type="primary" @click="handleSave">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 批量导出 -->
		<batchExport ref="batchExport"></batchExport>
	</div>
</template>

<script>
	import batchExport from "@/components/batchExport"
	export default {
		components: {
			batchExport
		},
		data() {
			return {
				query: {
					pageNumber: 1,
					pageSize: 30
				},
				pageTotal: 0,
				tableData: [],
				multipleSelection: [],
				visible: false,
				randomData: [{}],
				typeList: [],
				count: null
			}
		},
		mounted() {
			let yy = new Date().getFullYear()
			let mm = (new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1)
			let dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
			this.query.day = "" + yy + mm + dd;
			this.getData()
			this.getType()
			this.getRandomConfig()
		},
		methods: {
			//批量导出
			async clickBatchExport() {
				const res = await this.$get('/admin/question/getRandomQuestion', {
					pageNumber: 1,
					pageSize: 99999
				})
				if (res.code == 1000) {
					this.tableData = res.data
					this.$refs.batchExport.show(1, res.data)
				}
			},
			//参数设置
			async handleSave() {
				const res = await this.$post('/admin/question/saveRandomConfig', this.randomData)
				if (res.code == 1000) {
					this.visible = false
					this.getRandomConfig()
				}
			},
			async getRandomConfig() {
				const res = await this.$get('/admin/question/getRandomConfig')
				this.randomData = res.data.length != 0 ? res.data : [{}]
				this.sum()
			},
			sum() {
				let arr = Array.from(this.randomData, ({
					count
				}) => {
					if (!this.$.isEmpty(count)) {
						return count
					}
				})
				arr = arr.filter(item => item)
				this.count = eval(arr.join("+"));
			},
			//获取题型
			async getType() {
				const res = await this.$get('/admin/questionType/getQuestionSort', this.query)
				if (res.code == 1000) {
					this.typeList = res.data
				}
			},
			//多选操作
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			//获取列表数据
			async getData() {
				const res = await this.$get('/admin/question/getRandomQuestion', this.query)
				if (res.code == 1000) {
					this.tableData = res.data
				}
			},
			//搜索
			handleSearch() {
				this.query.pageNumber = 1
				this.getData();
			},
			//查询
			handleRefresh() {
				this.query = {
					pageNumber: 1,
					pageSize: 30
				}
				this.getData();
			}
		}
	}
</script>

<style>
</style>